<template>
    <div class="main">
        <!-- 日期选择 -->
        <div class="date">游玩日期</div>
        <!-- <div class="rl" v-for="date in dates" :key="date">
            {{date.day}}
            {{date.mon}}
        </div> -->
        <div class="">
            <ul class="rls">
                <li class="rl" v-for="date in dates" :key="date.day">
                    <div>{{date.day}}</div>
                    <div>{{date.mon}}</div>
                </li>
            </ul>
        </div>
        <div class="fk">
            <p>更多日期 ></p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dates: [
                { day: '星期一', mon: '19号' },
                { day: '星期二', mon: '20号' },
                { day: '星期三', mon: '21号' },
                { day: '星期四', mon: '22号' },
                { day: '星期五', mon: '23号' },
                { day: '星期六', mon: '24号' },
                { day: '星期日', mon: '25号' },
            ]
        }
    },
};
</script>
<style lang="scss" scoped>
.main {
    margin: 50px 80px;
    display: flex;

    .date {
        height: 50px;
        line-height: 50px;
    }

    .fk {
        margin-left: 10px;
        list-style: none;
        width: 100px;
        height: 50px;
        border: 1px solid rgb(185, 185, 185);
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
    }
}

.rls {
    display: flex;

    .rl {
        margin-left: 10px;
        list-style: none;
        width: 100px;
        height: 50px;
        border: 1px solid rgb(185, 185, 185);
        border-radius: 10px;
        text-align: center;
    }
}
</style>